<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>图书馆案例</title>
    <style type="text/css">
      .grid {
        margin: auto;
        width: 530px;
        text-align: center;
      }
      .grid table {
        border-top: 1px solid #c2d89a;
        width: 100%;
        border-collapse: collapse;
      }
      .grid th,
      td {
        padding: 10;
        border: 1px dashed #f3dcab;
        height: 35px;
        line-height: 35px;
      }
      .grid th {
        background-color: #f3dcab;
      }
      .grid .book {
        padding-bottom: 10px;
        padding-top: 5px;
        background-color: #f3dcab;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="grid">
        <div>
          <h1>图书管理</h1>
          <div class="book">
            <div>
              <label for="id"> 编号： </label>
              <input  :disabled="flag" type="text" id="id" v-model.trim="id" />
              <label for="name"> 名称： </label>
              <input type="text" id="name" v-model.trim="name" />
              <button @click="handle">提交</button>
            </div>
          </div>
        </div>
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>名称</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in books" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date | filtersDate}}</td>
              <td>
                <a href="" @click.prevent="updateItem(item.id,item.name)">修改</a>
                <a href=""@click.prevent="deleteItem">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
      /*
      图书管理-添加图书
    */
      var vm = new Vue({
        el: "#app",
        data: {
          id: "",
          name: "",
          flag:false,
          books: [
            {
              id: 1,
              name: "三国演义",
              date: "",
            },
            {
              id: 2,
              name: "水浒传",
              date: "",
            },
            {
              id: 3,
              name: "红楼梦",
              date: "",
            },
            {
              id: 4,
              name: "西游记",
              date: "",
            },
          ],
        },
        methods: {
          handle: function () {
            console.log(this.id,this.name);
            if(this.flag){
                this.books.forEach(item=>{
                  if(item.id===this.id){
                    item.id = this.id;
                    item.name = this.name;
                    item.date = +new Date();
                    this.flag = false;
                    this.id = '';
                    this.name = '';
                  }
                })
            }else{
              if(this.id && this.name){
              var obj = {
                id:this.id,
                name:this.name,
                date:+new Date(),
              }
              this.books.push(obj);
              this.id = '';
              this.name ='';
            }
            }
          },
          updateItem:function(id,name) {
              console.log(this.id,this.name);
              this.id = id;
              this.name = name;
              this.flag = true;
          },
          deleteItem:function(index) {
              this.books.splice(index,1);
              this.flag = false;
              this.id = '';
              this.name = '';
          },
        },
        filters:{
          filtersDate:function(poromt){
            var str = poromt? new Date(parseInt(poromt)).getFullYear():'';
            return str;
          }
        },
      });
    </script>
  </body>
</html>
